<template>
<div class="block_main blue-tit">
    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title">{{title}}</div>
        
            <el-form style="width:60%;" :rules="rules" ref="ruleForm" :model="AddForm" label-width="150px" size="small">
                <el-form-item label="权限分组" prop="gid">
                    <el-radio-group v-model="AddForm.gid">
                        <el-radio label="1" value="1">系统管理员</el-radio>
                        <el-radio label="2" value="2">市县用户</el-radio>
                        <el-radio label="3" value="3">政府办公室（运行局）</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="登录名" prop="user">
                <el-input v-model="AddForm.user" placeholder="请输入登录名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                <el-input v-model="AddForm.pwd" placeholder="请输入密码(如果不填，默认原密码，否则视为重设密码)"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="newpwd" >
                <el-input v-model="AddForm.newpwd" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="显示名称" prop="name">
                <el-input v-model="AddForm.name" placeholder="请输入显示名称"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                <el-input v-model="AddForm.phone" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="mail">
                <el-input v-model="AddForm.mail" placeholder="请输入邮箱" type="mail"></el-input>
                </el-form-item>
                <el-form-item label="账号分级" prop="is_system">
                    <el-radio-group v-model="AddForm.is_system">
                        <el-radio label="1">平台管理办公室,运行局</el-radio>
                        <el-radio label="2">市级用户</el-radio>
                        <el-radio label="3">县长热线</el-radio>
                    </el-radio-group>
                </el-form-item>
              <el-form-item label="">
                <el-button size="small" type="primary" @click="saveForm('ruleForm')">保存</el-button>
              </el-form-item>
            </el-form>
        </el-card>
       
      </el-col>
    </el-row>

</div>
  
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import actionurl from "@/assets/js/actionurl";
import config from "@/config.js";

export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      
      const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
  
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error('请输入正确的手机号'));
      }
      
    };

    var checkMail = (rule, value, callback) => {
     
      const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
  
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error('请输入正确的邮箱'));
      }
     
    };

    var validatePassConfim = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.AddForm.pwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
        isNewsUser:true,
        AddForm:{
          gid:'1',
          is_system:'1',
          pwd:'123456',
          newpwd:'123456'
        },
        rules: {
         gid: [
            { required: true, message: '请选择权限分组', trigger: 'blur' },
          ],
          user: [
            { required: true, message: '请输入公司联系人', trigger: 'blur' }
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur' }
          ],
          newpwd: [
            {required: true,validator: validatePassConfim, trigger: 'blur' }
          ],
          name: [
            {required: true, message: '请输入显示名称', trigger: 'blur' }
          ],
          phone: [
            {validator: checkPhone,required: true,trigger: 'blur' }
          ],
          mail: [
            {validator: checkMail,required: true,trigger: 'blur' }
          ],
          is_system: [
            {required: true, message: '请选择账号分级', trigger: 'blur' }
          ]
          
        },
        title:'新增'
    };
  },
  methods: {
    saveForm(formName){
      var _this = this;
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          if(_this.$route.params.type == '0'){
            _this.addUrlFn();
          }else{
            _this.editUrlFn();
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addUrlFn(){
      var _this = this;
      actionurl.addAttendant({
          gid:this.AddForm.gid,
          user:this.AddForm.user,
          pwd:this.AddForm.pwd,
          name:this.AddForm.name,
          phone:this.AddForm.phone,
          mail:this.AddForm.mail,
          is_system:this.AddForm.is_system
        }, function(re) {
          _this.$message(re.msg);
          _this.$router.push({path: '/userList'});
          _this.options = re.data.city;
          _this.optionsArea = re.data.county;

      });
    },
    getUserInfo(){
      var _this = this;
      actionurl.getAttendantInfoById({
          id:_this.$route.params.type,
          
        }, function(re) {
          _this.$message(re.msg);
          if(re.status==1){
            _this.AddForm={
              gid:re.data[0].gid.toString(),
              user:re.data[0].user,
              // pwd:re.data[0].pwd,
              name:re.data[0].name,
              phone:re.data[0].phone,
              mail:re.data[0].mail,
              is_system:re.data[0].is_system.toString(),


            }
          }

      });
    },
    editUrlFn(){
      var _this = this;
      actionurl.editAttendantInfo({
          id:this.$route.params.type,
          gid:this.AddForm.gid,
          user:this.AddForm.user,
          name:this.AddForm.name,
          phone:this.AddForm.phone,
          mail:this.AddForm.mail,
          is_system:this.AddForm.is_system
        }, function(re) {
          _this.$message(re.msg);
      
          _this.$router.push({path: '/userList'});
          _this.options = re.data.city;
          _this.optionsArea = re.data.county;

      });
    },
  
  },
  
  created() {

    if(this.$route.params.type == '0'){
      this.title="新增";
      this.AddForm.newpwd='123456'

      this.AddForm.pwd='123456'
    }else{
      this.title="编辑";
      this.getUserInfo();
      this.rules.pwd[0].required=false;
      this.rules.newpwd[0].required=false;
    }
  }
};
</script>
